<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 500px;
            border: 1px solid red;
            /*
                text-align 文本的水平对齐
                    可选值:
                        left 左侧对齐
                        right 右对齐
                        center 居中对齐
                        justify 两端对齐
             */
            /*text-align: justify;*/
            font-size: 50px;
        }
        span{
            font-size: 20px;
            border: 1px solid black;
            /*
                vertical-align 设置元素垂直对齐方式
                    可选值:
                        baseline 默认值 基线对齐
                        top 顶部对齐
                        bottom 底部对齐
                        middle 居中对齐
             */
            vertical-align: middle;
        }
        p{
            border: 1px solid red;
        }
        img{
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div>今天天气 hellox <span>真不错 hello</span> </div>
<!--    <div>-->
<!--        hello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hellohello hello-->
<!--    </div>-->

    <p>
        <img src="../exercise/img/1.jpg" alt="">
    </p>
</body>
</html>